<!--
 * @Author: 四川华西绿舍建材有限公司
 * @Date: 2023-11-17 11:46:18
 * @LastEditors: 陈波
 * @LastEditTime: 2024-03-20 23:26:09
 * @Description: 
 * @FilePath: \graDesign\src\views\ProIntro\index.vue
-->
<template>
  <div class="home" :style="{ fontSize: fontSize }">
    <LayoutIndex>
      <p>Title:</p>
      <p>
        <el-collapse>
          <el-collapse-item name="1">
            <template #title>
              <span :style="{ fontSize: fontSize }">智慧物联网边缘计算系统 -- 基于TD3调度、SAC调度算法的项目管理系统</span>
              <el-icon class="header-icon">
                <info-filled />
              </el-icon>
            </template>
            <div :style="{ fontSize: fontSize }">
              随着物联网的快速发展，边缘计算成为了解决延迟、带宽压力和隐私问题的重要技术。在边缘计算中，任务卸载和资源分配是关键挑战，需要有效地将计算任务从移动设备卸载到边缘服务器，并合理分配资源以满足任务的需求。联邦深度强化学习作为一种分布式学习方法，可以有效地解决边缘计算中的任务卸载和资源分配问题。
            </div>
          </el-collapse-item>
        </el-collapse>
      </p>
    </LayoutIndex>
    <LayoutDetail class="layout-detail">
      <p>Content:</p>
      <transition name="fade" mode="out-in">
        <component :is="nowCom" />
      </transition>
      <div class="pageNation">
        <el-pagination 
          background 
          layout="prev, pager, next"
          :total="20"
          @current-change="handleCurrentChange"
        />
      </div>
    </LayoutDetail>
  </div>
</template>

<script setup lang="ts">
import { ref, shallowRef } from "vue";
import { storeToRefs } from "pinia";
import useThemeConfigStore from '@/store/themeConfig';
import { InfoFilled } from '@element-plus/icons-vue'
import CEIntro from "./components/CEIntro.vue";
import Division from "./components/Division.vue";

const themeConfigStore = useThemeConfigStore();
const { getColor: color, getThemeFontSize: fontSize } = storeToRefs(themeConfigStore);

let nowCom = ref(shallowRef(CEIntro));
const handleCurrentChange = (val: number) => {
  if(val == 2) {
    nowCom.value = Division;
  }
  if(val == 1) {
    nowCom.value = CEIntro;
  }
}




// import axios from 'axios';
// import testApi from "@/request/api/testApi";
// import { onMounted } from 'vue'; 

// let source: any = null;
// const sendGet = () => {
//   source = axios.CancelToken.source()
//   testApi
//     .testGetHttp(source.token)
//     .then((res) => {
//       console.log("get请求", res);
//     })
//     .catch((err) => {
//       if (axios.isCancel(err)) {
//         console.log("请求取消", err);
//       } else {
//         console.log("其他错误", err);
//       }
//     });
// }

// const sendPost = () => {
//   source = axios.CancelToken.source()
//   testApi
//     .testPostHttp(
//       {
//         name: "张三",
//         age: 18,
//         sex: "男",
//       },
//       source.token
//     )
//     .then((res) => {
//       console.log("post请求", res);
//     })
//     .catch((err) => {
//       if (axios.isCancel(err)) {
//         console.log("请求取消", err);
//       } else {
//         console.log("其他错误", err);
//       }
//     });
// }

// const cancelRequest = () => {
//   source && source.cancel("手动调用source.cancel方法，手动取消请求");
// }

// onMounted(() => {
//   const map = new Map([
//     ['a', 1],
//     ['b', 2],
//   ])

//   const res = Object.fromEntries(map);
//   // console.log('res', res)

// })
</script>

<style scoped lang="scss">
.layout-detail {
  width: 100%;
  position: relative;
  .pageNation {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
  }
}

.fade-enter-from {
  /* 进入时的透明度为0 和 刚开始进入时的原始位置通过active透明度渐渐变为1 */
  opacity: 0;
  transform: translateX(10%);
}

.fade-enter-to {
  /*定义进入完成后的位置 和 透明度 */
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-active,
.fade-enter-active {
  transition: all 0.5s ease;
}

.fade-leave-from {
  /* 页面离开时一开始的css样式,离开后为leave-to，经过active渐渐透明 */
  transform: translateX(0%);
  opacity: 1;
}

.fade-leave-to {
  /* 这个是离开后的透明度通过下面的active阶段渐渐变为0 */
  transform: translateX(100%);
  opacity: 0;
}
/* 渐变设置 */
// .fade-enter-from, .fade-leave-to {
//   transform: translateX(20px);
//   opacity: 0;
// }
// .fade-enter-to, .fade-leave-from {
//   opacity: 1;
// }
// .fade-enter-active {
//   transition: all 0.7s ease;
// }
// .fade-leave-active {
//    transition: all 0.3s cubic-bezier(1, 0.6, 0.6, 1);
// }



</style>
